<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">HeHe Music</h1>
    <div class="mine">
      <router-link to="/user">
        <i class="icon-mine"></i>
      </router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {

}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.m-header
  position: relative // 子元素采用absolute布局，父元素设定为relative
  height: 44px
  text-align: center
  color: $color-theme
  font-size: 0  // 防止子元素之间的间隙，父元素font-size: 0，子元素另设字体大小
  .icon
    display: inline-block
    vertical-align: top
    margin-top: 6px
    width: 30px
    height: 32px
    margin-right: 9px
    bg-image('logo') // 根据媒体查询，获取2倍图或3倍图
    background-size: 30px 32px // 背景图片大小
  .text
    display: inline-block
    vertical-align: top
    line-height: 44px
    font-size: $font-size-large
  .mine
    position: absolute
    top: 0
    right: 0
    .icon-mine
      display: block
      padding: 12px
      font-size: 20px  // 图标字体，大小取决于 font-size的设置了
      color: $color-theme
</style>
